<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>雪花下落</title>
</head>
<style>
    .box{
        height: 600px;
        width: 800px;
        border: 1px solid red;
        position: relative;
        overflow: hidden;
    }
    .box div{
        width: 40px;
        height: 40px;
        position:absolute;
    }
    #man{
        position: absolute;
        z-index: 1;
    }
    #man img{
        width: 105px;
        height: 133.2px;
        position: absolute;
        top: -200px;
    }
</style>
<body>
    <div class="box" id="box">
    </div>
    <div id="man"><img src="img/man.png"></div>
    <input type="button" value="生成雪花" id="btn" />
</body>
<script>
    var box=document.getElementById("box");
    var btn=document.getElementById("btn");
    var man=document.getElementById("man");
    var num=0;
    man.onclick=function(){
        num++;
        man.style.left=num*10+"px";
    }
    //生成雪花
    function createSnow(l,t,s){
        var newNode=document.createElement("div");
         newNode.style.left=l+"px";
         newNode.style.top=t+"px";
         newNode.style.background="url('img/jb.png')";
         newNode.style.backgroundSize="100% 100%";
         box.appendChild(newNode);
         startMove(newNode);
    }
    var time1=null;
    var poY=0;
    btn.onclick=function(){

        setInterval(function(){
            var le=parseInt(Math.random()*770);//随机生成位置及宽高
            var to=parseInt(5);
            var size=parseInt(Math.random()*10+20);
            createSnow(le,to,size);
        },100);
        
    }
    //雪花下落
    function startMove(obj){
        var poY=obj.offsetTop;//获取对象到顶部边宽的距离
        var time2=null;
        function move(){
            poY++;
            obj.style.top=poY+"px";
            if(poY>600){//当雪花超出容器时的处理事件
                clearInterval(time2);//清除计时器
                box.removeChild(obj);//删除超出容器的节点对象
            }
        }
        time2=setInterval(move,10);
    }
</script>
</html>